<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的小餐桌 - 发现</title>
    <link rel="stylesheet" href="styles.css">
    <link href="https://cdn.jsdelivr.net/npm/lucide-static@latest/font/lucide.min.css" rel="stylesheet">
</head>
<body>
    <div class="device-container">
        <!-- 状态栏 -->
        <div class="status-bar">
            <div class="status-bar-left">9:41</div>
            <div class="status-bar-right">
                <span class="lucide-wifi"></span>
                <span class="lucide-battery"></span>
            </div>
        </div>
        
        <!-- 应用内容 -->
        <div class="app-container">
            <!-- 标题 -->
            <div class="header">
                <div class="title">发现美食</div>
                <span class="lucide-search"></span>
            </div>
            
            <!-- 分区选择器 -->
            <div class="tab-bar">
                <div class="tab active" onclick="switchTab(this, 'square-content')">广场</div>
                <div class="tab" onclick="switchTab(this, 'recommend-content')">推荐</div>
                <div class="tab" onclick="switchTab(this, 'topic-content')">专题</div>
            </div>
            
            <!-- 广场内容 -->
            <div id="square-content" class="tab-content">
                <!-- 焦点轮播 -->
                <div class="discover-banner">
                    <img src="https://images.unsplash.com/photo-1556910633-5099dc3b04e7?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" alt="焦点图">
                    <div class="discover-banner-text">
                        <h2 style="margin: 0; font-size: 20px;">美食社区广场</h2>
                        <p style="margin: 5px 0 0; font-size: 14px;">浏览其他用户分享的美食和厨房</p>
                    </div>
                </div>
                
                <!-- 热门厨房 -->
                <div class="section-title">热门厨房</div>
                
                <div class="dish-container">
                    <!-- 热门厨房1 -->
                    <div class="card" style="position: relative;" onclick="window.location.href='kitchen-shared.html'">
                        <img src="https://images.unsplash.com/photo-1583394293214-28ded15ee548?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" alt="小厨娘的家常菜" style="width: 100%; height: 100px; object-fit: cover; border-radius: var(--border-radius) var(--border-radius) 0 0;">
                        <div style="padding: 10px;">
                            <div style="display: flex; align-items: center; margin-bottom: 5px;">
                                <img src="https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" alt="用户头像" style="width: 30px; height: 30px; border-radius: 15px; margin-right: 8px;">
                                <div style="font-weight: 600;">小厨娘的家常菜</div>
                            </div>
                            <div style="color: #777; font-size: 12px; margin-bottom: 5px;">分享了32道菜谱 · 获赞328</div>
                            <div style="font-size: 12px;">擅长家常菜，川菜</div>
                        </div>
                    </div>
                    
                    <!-- 热门厨房2 -->
                    <div class="card" style="position: relative;" onclick="window.location.href='kitchen-shared.html'">
                        <img src="https://images.unsplash.com/photo-1596189181426-7f63a1737f0d?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" alt="老饕的美食记录" style="width: 100%; height: 100px; object-fit: cover; border-radius: var(--border-radius) var(--border-radius) 0 0;">
                        <div style="padding: 10px;">
                            <div style="display: flex; align-items: center; margin-bottom: 5px;">
                                <img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" alt="用户头像" style="width: 30px; height: 30px; border-radius: 15px; margin-right: 8px;">
                                <div style="font-weight: 600;">老饕的美食记录</div>
                            </div>
                            <div style="color: #777; font-size: 12px; margin-bottom: 5px;">分享了45道菜谱 · 获赞562</div>
                            <div style="font-size: 12px;">擅长西餐，甜点</div>
                        </div>
                    </div>
                </div>
                
                <!-- 热门菜品 -->
                <div class="section-title">用户分享的热门菜品</div>
                
                <div class="dish-container">
                    <!-- 热门菜品1 -->
                    <div class="card dish-card" style="position: relative;" onclick="window.location.href='dish-detail-shared.html'">
                        <div style="position: absolute; top: 10px; right: 10px; background-color: rgba(76,175,80,0.9); color: white; padding: 3px 8px; border-radius: 10px; font-size: 12px; font-weight: 500; z-index: 1;">
                            <span class="lucide-heart" style="font-size: 12px; margin-right: 3px;"></span>245
                        </div>
                        <img src="https://images.unsplash.com/photo-1512058454905-6b841e7ad132?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" alt="红烧排骨" class="dish-image">
                        <div class="dish-info">
                            <div class="dish-title">红烧排骨</div>
                            <div class="dish-description">肉质鲜嫩，口感酥烂</div>
                            <div style="font-size: 12px; color: #777;">
                                <img src="https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" alt="用户头像" style="width: 16px; height: 16px; border-radius: 8px; margin-right: 4px; vertical-align: middle;">
                                <span>小厨娘的家常菜</span>
                            </div>
                        </div>
                        <div class="dish-actions">
                            <span class="lucide-bookmark"></span>
                            <span class="lucide-share-2"></span>
                        </div>
                    </div>
                    
                    <!-- 热门菜品2 -->
                    <div class="card dish-card" style="position: relative;" onclick="window.location.href='dish-detail-shared.html'">
                        <div style="position: absolute; top: 10px; right: 10px; background-color: rgba(76,175,80,0.9); color: white; padding: 3px 8px; border-radius: 10px; font-size: 12px; font-weight: 500; z-index: 1;">
                            <span class="lucide-heart" style="font-size: 12px; margin-right: 3px;"></span>189
                        </div>
                        <img src="https://images.unsplash.com/photo-1551183053-bf91a1d81141?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" alt="巧克力蛋糕" class="dish-image">
                        <div class="dish-info">
                            <div class="dish-title">巧克力熔岩蛋糕</div>
                            <div class="dish-description">入口即化，香浓醇厚</div>
                            <div style="font-size: 12px; color: #777;">
                                <img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" alt="用户头像" style="width: 16px; height: 16px; border-radius: 8px; margin-right: 4px; vertical-align: middle;">
                                <span>老饕的美食记录</span>
                            </div>
                        </div>
                        <div class="dish-actions">
                            <span class="lucide-bookmark"></span>
                            <span class="lucide-share-2"></span>
                        </div>
                    </div>
                </div>
                
                <!-- 查看更多 -->
                <div style="text-align: center; margin: 20px 0;">
                    <button class="button ghost" style="width: 90%;">查看更多内容</button>
                </div>
            </div>
            
            <!-- 推荐内容 -->
            <div id="recommend-content" class="tab-content hidden">
                <!-- 焦点轮播 -->
                <div class="discover-banner">
                    <img src="https://images.unsplash.com/photo-1540189549336-e6e99c3679fe?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" alt="焦点图">
                    <div class="discover-banner-text">
                        <h2 style="margin: 0; font-size: 20px;">精选美食推荐</h2>
                        <p style="margin: 5px 0 0; font-size: 14px;">探索更多健康美味的菜品</p>
                    </div>
                </div>
                
                <!-- 分类选择 -->
                <div class="category-pills">
                    <div class="category-pill active">全部</div>
                    <div class="category-pill">川菜</div>
                    <div class="category-pill">粤菜</div>
                    <div class="category-pill">西餐</div>
                    <div class="category-pill">日料</div>
                    <div class="category-pill">素食</div>
                    <div class="category-pill">甜点</div>
                </div>
                
                <!-- 热门菜品 -->
                <div class="section-title">本周热门</div>
                
                <div class="dish-container">
                    <!-- 热门菜品1 -->
                    <div class="card dish-card" style="position: relative;" onclick="window.location.href='dish-detail.html'">
                        <div style="position: absolute; top: 10px; right: 10px; background-color: rgba(255,152,0,0.9); color: white; padding: 3px 8px; border-radius: 10px; font-size: 12px; font-weight: 500; z-index: 1;">
                            热门
                        </div>
                        <img src="https://images.unsplash.com/photo-1546069901-ba9599a7e63c?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" alt="蔬菜沙拉" class="dish-image">
                        <div class="dish-info">
                            <div class="dish-title">蔬菜沙拉</div>
                            <div class="dish-description">新鲜蔬菜搭配特制沙拉酱</div>
                            <div class="dish-price">¥18</div>
                        </div>
                        <div class="dish-actions">
                            <span class="lucide-heart"></span>
                            <span class="lucide-shopping-cart"></span>
                        </div>
                    </div>
                    
                    <!-- 热门菜品2 -->
                    <div class="card dish-card" style="position: relative;" onclick="window.location.href='dish-detail.html'">
                        <div style="position: absolute; top: 10px; right: 10px; background-color: rgba(255,152,0,0.9); color: white; padding: 3px 8px; border-radius: 10px; font-size: 12px; font-weight: 500; z-index: 1;">
                            热门
                        </div>
                        <img src="https://images.unsplash.com/photo-1512058564366-18510be2db19?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" alt="红烧肉" class="dish-image">
                        <div class="dish-info">
                            <div class="dish-title">红烧肉</div>
                            <div class="dish-description">传统美食，肥而不腻</div>
                            <div class="dish-price">¥36</div>
                        </div>
                        <div class="dish-actions">
                            <span class="lucide-heart"></span>
                            <span class="lucide-shopping-cart"></span>
                        </div>
                    </div>
                </div>
                
                <!-- 新品推荐 -->
                <div class="section-title">新品推荐</div>
                
                <div class="dish-container">
                    <!-- 新品1 -->
                    <div class="card dish-card" style="position: relative;" onclick="window.location.href='dish-detail.html'">
                        <div style="position: absolute; top: 10px; right: 10px; background-color: rgba(76,175,80,0.9); color: white; padding: 3px 8px; border-radius: 10px; font-size: 12px; font-weight: 500; z-index: 1;">
                            新品
                        </div>
                        <img src="https://images.unsplash.com/photo-1548940740-204726a19be3?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" alt="松露意面" class="dish-image">
                        <div class="dish-info">
                            <div class="dish-title">松露意面</div>
                            <div class="dish-description">黑松露与奶油的完美结合</div>
                            <div class="dish-price">¥52</div>
                        </div>
                        <div class="dish-actions">
                            <span class="lucide-heart"></span>
                            <span class="lucide-shopping-cart"></span>
                        </div>
                    </div>
                    
                    <!-- 新品2 -->
                    <div class="card dish-card" style="position: relative;" onclick="window.location.href='dish-detail.html'">
                        <div style="position: absolute; top: 10px; right: 10px; background-color: rgba(76,175,80,0.9); color: white; padding: 3px 8px; border-radius: 10px; font-size: 12px; font-weight: 500; z-index: 1;">
                            新品
                        </div>
                        <img src="https://images.unsplash.com/photo-1563379926898-05f4575a45d8?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" alt="清蒸鱼" class="dish-image">
                        <div class="dish-info">
                            <div class="dish-title">清蒸鱼</div>
                            <div class="dish-description">新鲜鱼肉，原汁原味</div>
                            <div class="dish-price">¥48</div>
                        </div>
                        <div class="dish-actions">
                            <span class="lucide-heart"></span>
                            <span class="lucide-shopping-cart"></span>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 专题内容 -->
            <div id="topic-content" class="tab-content hidden">
                <!-- 专题推荐 -->
                <div class="section-title">健康低卡专题</div>
                
                <div class="card" style="margin-bottom: 20px;">
                    <div style="display: flex; align-items: center; margin-bottom: 15px;">
                        <img src="https://images.unsplash.com/photo-1490645935967-10de6ba17061?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" alt="健康饮食" style="width: 60px; height: 60px; border-radius: 30px; object-fit: cover; margin-right: 15px;">
                        <div>
                            <div style="font-weight: 600; margin-bottom: 5px;">健康低卡料理</div>
                            <div style="font-size: 12px; color: #777;">20道菜谱 · 平均300卡/份</div>
                        </div>
                    </div>
                    <div style="display: flex; gap: 10px; overflow-x: auto; padding-bottom: 10px;">
                        <img src="https://images.unsplash.com/photo-1546069901-ba9599a7e63c?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" alt="菜品1" style="width: 100px; height: 100px; border-radius: 8px; object-fit: cover; flex-shrink: 0;">
                        <img src="https://images.unsplash.com/photo-1529042410759-befb1204b468?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" alt="菜品2" style="width: 100px; height: 100px; border-radius: 8px; object-fit: cover; flex-shrink: 0;">
                        <img src="https://images.unsplash.com/photo-1540420773420-3366772f4999?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" alt="菜品3" style="width: 100px; height: 100px; border-radius: 8px; object-fit: cover; flex-shrink: 0;">
                        <img src="https://images.unsplash.com/photo-1543362906-acfc16c67564?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" alt="菜品4" style="width: 100px; height: 100px; border-radius: 8px; object-fit: cover; flex-shrink: 0;">
                    </div>
                    <button class="button ghost" style="width: 100%; margin-top: 10px;">查看全部</button>
                </div>
                
                <div class="section-title">家常菜专题</div>
                
                <div class="card" style="margin-bottom: 20px;">
                    <div style="display: flex; align-items: center; margin-bottom: 15px;">
                        <img src="https://images.unsplash.com/photo-1493770348161-369560ae357d?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" alt="家常菜" style="width: 60px; height: 60px; border-radius: 30px; object-fit: cover; margin-right: 15px;">
                        <div>
                            <div style="font-weight: 600; margin-bottom: 5px;">妈妈的味道</div>
                            <div style="font-size: 12px; color: #777;">30道家常菜 · 简单易学</div>
                        </div>
                    </div>
                    <div style="display: flex; gap: 10px; overflow-x: auto; padding-bottom: 10px;">
                        <img src="https://images.unsplash.com/photo-1512058454905-6b841e7ad132?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" alt="菜品1" style="width: 100px; height: 100px; border-radius: 8px; object-fit: cover; flex-shrink: 0;">
                        <img src="https://images.unsplash.com/photo-1504674900247-0877df9cc836?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" alt="菜品2" style="width: 100px; height: 100px; border-radius: 8px; object-fit: cover; flex-shrink: 0;">
                        <img src="https://images.unsplash.com/photo-1563379926898-05f4575a45d8?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" alt="菜品3" style="width: 100px; height: 100px; border-radius: 8px; object-fit: cover; flex-shrink: 0;">
                        <img src="https://images.unsplash.com/photo-1541844053589-346841d0b34c?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" alt="菜品4" style="width: 100px; height: 100px; border-radius: 8px; object-fit: cover; flex-shrink: 0;">
                    </div>
                    <button class="button ghost" style="width: 100%; margin-top: 10px;">查看全部</button>
                </div>
            </div>
        </div>
        
        <!-- 底部导航栏 -->
        <div class="navbar">
            <a href="kitchen.html" class="nav-item">
                <span class="lucide-chef-hat nav-icon"></span>
                <span>厨房</span>
            </a>
            <a href="mealplan.html" class="nav-item">
                <span class="lucide-calendar nav-icon"></span>
                <span>饮食计划</span>
            </a>
            <a href="discover.html" class="nav-item active">
                <span class="lucide-compass nav-icon"></span>
                <span>发现</span>
            </a>
            <a href="profile.html" class="nav-item">
                <span class="lucide-user nav-icon"></span>
                <span>我的</span>
            </a>
        </div>
    </div>
    
    <script>
        function switchTab(tab, contentId) {
            // 移除所有标签的active类
            document.querySelectorAll('.tab').forEach(t => {
                t.classList.remove('active');
            });
            
            // 给当前标签添加active类
            tab.classList.add('active');
            
            // 隐藏所有内容
            document.querySelectorAll('.tab-content').forEach(content => {
                content.classList.add('hidden');
            });
            
            // 显示当前内容
            document.getElementById(contentId).classList.remove('hidden');
        }
    </script>
</body>
</html> 